<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="width=device-width" >
    <title>Title</title>
    <link rel="stylesheet" href="/css/map.css">
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/china.js"></script>
    <script type="text/javascript" src="/js/bmap.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">

</head>
<body style="background-image: url('/image/mi.png'); background-size: cover; background-position: center;">
    <div class="container">
        <div class="square">
            <div class="chart-container" id="chart" style="background-image: url('/image/mi.png'); background-size: cover; background-position: center;"></div>
                <div class="icon-container" style="background-image: url('/image/mi.png'); background-size: cover; background-position: center;">
                    <div class="button-container" >
                        <button  id="hourline-chart-button">HourLine Chart</button>
                        <button  id="dayline-chart-button" >DayLine Chart</button>


                        <button  id="yearLine-chart-button">YearLine Chart</button>
                        <button  id="pie-chart-button">Pie Chart</button>
                    </div >
                    <div class="chart-contai" id="pie" style="font-style: normal;color:#000;">

                    </div>

                </div>
            </div>


        </div>
    </div>


    <script type="text/javascript">

        $(function () {
            var chartDom = document.getElementById('chart');
            var myChart = echarts.init(chartDom);
            // myChart.setOption(this.options);
            myChart.on('click',function(args){
                console.log(args.data);
                if(args.data.name=='北京'){
                    location.href = '/page/index.html';//测试效果
                }
            })

            var option;
            myChart.showLoading();
            $.getJSON("/space/findPrv",function (values){
                var pdata = []
                for(var i=0;i<values.length;i++){
                    var json = {}
                    json["name"]=values[i]['province']
                    json["value"] = values[i]['value']
                    pdata.push(json)
                }
                $.get('/json/chinaChange.json', function (chinaJson) {
                    myChart.hideLoading();
                    echarts.registerMap('China', chinaJson);
                    option = {
                        title: {
                            text: '中国各省份年平均AQI数据展示',
                            left: 'center',

                        },
                        tooltip: {
                            trigger: 'item',
                            showDelay: 0,
                            transitionDuration: 0.2
                        },
                        visualMap: {
                            left: 'right',
                            min: 0,
                            max: 100,
                            inRange: {
                                color: [
                                    '#313695',
                                    '#4575b4',
                                    '#74add1',
                                    '#abd9e9',
                                    '#e0f3f8',
                                    '#ffffbf',
                                    '#fee090',
                                    '#fdae61',
                                    '#f46d43',
                                    '#d73027',
                                    '#a50026'
                                ]
                            },
                            text: ['高', '低'],
                            textStyle:
                                {
                                    color:'black'
                                },
                            calculable: true
                        },
                        toolbox: {
                            show: true,
                            //orient: 'vertical',
                            left: 'left',
                            top: 'top',
                            feature: {
                                dataView: { readOnly: false },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        series: [
                            {
                                name: '数据名称',
                                type: 'map',
                                map: 'China',
                                label: {
                                    show: true
                                },
                                data: pdata
                            }

                        ]
                    };
                    myChart.setOption(option);
                });

                option && myChart.setOption(option);
//更新图表
            var chartDom = document.getElementById('pie');
            var chartChart = echarts.init(chartDom);
            var chartOption = {
                // 图表配置项
            };
            chartChart.setOption(chartOption);


            })
        })

        $(function () {
            var chartDom = document.getElementById('pie');
            var myChart = echarts.init(chartDom);

            $.getJSON("/time/day",function (values) {
                var option;
                var hourdata = [];
                var PM2_5 = [];
                var PM10 = [];
                var SO2 = [];
                var NO2 = [];
                var O3 = [];
                var CO = [];

                for (var i = 1; i < 8; i++) {
                    hourdata.push("星期" + i)
                }
                for (var i = 0; i < values.length; i++) {
                    if (values[i]["type"] == "PM2.5")
                        PM2_5.push(values[i]["average"])
                    else if (values[i]["type"] == "PM10")
                        PM10.push(values[i]["average"])
                    else if (values[i]["type"] == "SO2")
                        SO2.push(values[i]["average"])
                    else if (values[i]["type"] == "NO2")
                        NO2.push(values[i]["average"])
                    else if (values[i]["type"] == "O3")
                        O3.push(values[i]["average"])
                    else if (values[i]["type"] == "CO")
                        CO.push(values[i]["average"])
                }

                console.log(PM10)

                var option2 = {
                    title: {
                        text: '不同污染物一周内变化曲线',
                        z: 20,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        top: 30,
                        data: ['PM2.5', 'PM10', 'SO2', 'NO2', 'O3', 'CO'],
                        textStyle: {
                            color: 'black'
                        },
                        z: 5
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '15%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: hourdata,
                        axisLabel: {
                            textStyle: {
                                color: 'black' // 设置横坐标标签的字体颜色为红色
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: 'black' // 设置横坐标标签的字体颜色为红色
                            }
                        },
                    },
                    series: [
                        {
                            name: 'PM2.5',
                            type: 'line',
                            data: PM2_5
                        },
                        {
                            name: 'PM10',
                            type: 'line',
                            data: PM10
                        },
                        {
                            name: 'SO2',
                            type: 'line',
                            data: SO2
                        },
                        {
                            name: 'NO2',
                            type: 'line',
                            data: NO2
                        },
                        {
                            name: 'O3',
                            type: 'line',
                            data: O3
                        },
                        {
                            name: 'CO',
                            type: 'line',
                            data: CO
                        }
                    ]
                };
                myChart.setOption(option2);
            })
        })
        // const pieChartButton = document.getElementById('pie-chart-button');
        document.getElementById('dayline-chart-button').addEventListener('click', function() {
            echarts.dispose(document.getElementById("pie"));
            $(function () {
               getdata("/time/day",7,'不同污染物一周内变化曲线',"星期","","average")
                })
        });

        document.getElementById('pie-chart-button').addEventListener('click', function() {
            echarts.dispose(document.getElementById("pie"));
            $(function () {

                var chartDom = document.getElementById('pie');
                var myChart = echarts.init(chartDom);

                $.getJSON("/poll/findPoll",function (values){
                    var xdata = []

                    for(var i=0;i<values.length;i++){
                        var json = {}
                        json["name"]=values[i]['type']
                        json["value"] = values[i]['average']
                        xdata.push(json)
                    }
                var option1;
                option1 = {
                    title: {
                        text: '空气污染类型占比',
                        // subtext: 'Fake Data',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '饼状图',
                            type: 'pie',
                            radius: '50%',
                            data:xdata,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option1);

                })
            })
        });

        //hour
        document.getElementById('hourline-chart-button').addEventListener('click',function (){
            echarts.dispose(document.getElementById("pie"));
            $(function () {
                getdata("/time/hour",24,'不同污染物一天内变化曲线',"",":00","北京")
                })
            // })
        });

        //year
        document.getElementById('yearLine-chart-button').addEventListener('click',function (){
            echarts.dispose(document.getElementById("pie"));
            $(function () {
                getdata("/time/month",12,'不同污染物一年内变化曲线',"","月","average")
            })
            // })
        });



        // Add click event listener to the chart series
        /**
         *
         * @param data getjson的url
         * @param max   获取数据的范围
         * @param title 图表标题
         */
        function getdata(data,max,title,fset,eset,lie){
            var chartDom = document.getElementById('pie');
            var myChart = echarts.init(chartDom);

            $.getJSON(data,function (values) {
                var option;
                var hourdata = [];
                var PM2_5 = [];
                var PM10 = [];
                var SO2 = [];
                var NO2 = [];
                var O3 = [];
                var CO = [];

                for (var i = 0; i < max; i++) {
                    hourdata.push(fset + i + eset)
                }
                for (var i = 0; i < values.length; i++) {
                    if (values[i]["type"] == "PM2.5")
                        PM2_5.push(values[i][lie])
                    else if (values[i]["type"] == "PM10")
                        PM10.push(values[i][lie])
                    else if (values[i]["type"] == "SO2")
                        SO2.push(values[i][lie])
                    else if (values[i]["type"] == "NO2")
                        NO2.push(values[i][lie])
                    else if (values[i]["type"] == "O3")
                        O3.push(values[i][lie])
                    else if (values[i]["type"] == "CO")
                        CO.push(values[i][lie])
                }

                console.log(PM10)
                option = {
                    textStyle:
                        {
                            color: 'black'
                        },
                    title: {
                        text: title,
                        z: 20,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        top: 30,
                        data: ['PM2.5', 'PM10', 'SO2', 'NO2', 'O3', 'CO'],
                        icon: "circle",
                        textStyle: {
                            color: 'black'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: hourdata,
                        axisLabel: {
                            textStyle: {
                                color: 'black' // 设置横坐标标签的字体颜色为红色
                            }
                        }
                        ,
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: 'black' // 设置横坐标标签的字体颜色为红色
                            }
                        },
                    },
                    series: [
                        {
                            name: 'PM2.5',
                            type: 'line',
                            data: PM2_5
                        },
                        {
                            name: 'PM10',
                            type: 'line',
                            data: PM10
                        },
                        {
                            name: 'SO2',
                            type: 'line',
                            data: SO2
                        },
                        {
                            name: 'NO2',
                            type: 'line',
                            data: NO2
                        },
                        {
                            name: 'O3',
                            type: 'line',
                            data: O3
                        },
                        {
                            name: 'CO',
                            type: 'line',
                            data: CO
                        }
                    ]
                };
                myChart.setOption(option);
            })
        }
    </script>
</body>
</html>